<script lang="ts" setup>
import { useToggle } from '@vueuse/core'

import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { useCommentStore } from './stores/commentStore'
import { useArcoForm } from '@/composables/useArcoForm'
import type { FormRule } from '@/types/components-tool'

const props = defineProps<{
  targetName: string
  targetID: string
  issueID: number
}>()

const [visible, toggleVisible] = useToggle()
const { formRef, formState, onValidateSuccess, validate } = useArcoForm({
  message: ''
})

const isPending = ref(false)
const { addComment } = useCommentStore()

onValidateSuccess(({ message }) => {
  isPending.value = true

  setTimeout(() => {
    isPending.value = false
    toggleVisible(false)
    addComment({ ...props, passed: false, hasReplied: false, message })
    Message.success('申请成功')
  }, Math.random() * 1000)
})

const rules: FormRule<typeof formState.value> = {
  message: [{ required: true, message: '请输入个人简介' }]
}
</script>

<template>
  <a-button status="success" type="dashed" size="mini" @click="toggleVisible(true)">
    申请
    <a-modal
      hide-title
      :modal-style="{ padding: '0', width: '100%', maxWidth: '768px' }"
      :body-style="{ paddingBottom: '0' }"
      :ok-loading="isPending"
      ok-text="申请"
      :visible
      @ok="validate"
      @cancel="toggleVisible(isPending)"
    >
      <a-form ref="formRef" size="small" layout="vertical" :model="formState" :rules>
        <a-form-item field="name" label="个人介绍">
          <a-input v-model.trim="formState.message" :max-length="64" show-word-limit />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-button>
</template>
